<!-- Vue指令v-for
1.作用：基于数据循环，多次渲染整个元素→数组、对象、数字.
例子:<p v-for="...">我是一个内容</p>
2.遍历数组语法：
v-for="(item, index) in 数组"
item每一项，index下标 -->
<!-- 
v-for 中的key
key作用：给元素添加的唯一标识，便于Vue进行列表项的正确排序复用。
注意点：
1.key的值只能是字符串或数字类型
2.key 的值必须具有唯一性
3.推荐使用 id 作为key（唯一），不推荐使用 index 作为key（会变化，不对应）
<li v-for="(item,index) in xxx:key="唯一值"></li>
 -->
<div id="app">
    <h3>小黑的书架</h3>
    <ul>
        <li v-for="(item,index) in booksList" :key="item.id">
            <span>{{ item.name }}</span>
            <span>{{item.author}}</span>
            <button @click="del(item.id)">删除</button>
        </li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            booksList: [
                { id: 1, name: '《红楼梦》', author: '曹雪芹' }, //0
                { id: 2, name: '《西游记》', author: '吴承恩' }, //1
                { id: 3, name: '《水浒传》', author: '施耐庵' }, //2
                { id: 4, name: '《三国演义》', author: '罗贯中' }, //3
            ]
        },
        methods: {
            del(id) {
                this.booksList = this.booksList.filter(item => item.id !== id)
            }
        },
    })
</script>